In this step you use the Page node and the Pages editor to create the application structure. You also learn how to paint the background of 2D nodes using Brushes.
Create Page nodes
In this section you use the Pages editor to create three Page nodes, each representing a different part of your application. Use the Page node to add structure to your Kanzi application. For example, if your Kanzi application contains several views or parts, such as a music player, a photo album, and a calendar, create each on its own Page, and then use Page nodes to create the structure for each view or part.
In this and the following steps of this tutorial you add content to the Page nodes you create here.
To create Page nodes:
Click the Pages editor tab next to the Properties and Triggers tabs to open the Pages editor.
In the Pages editor click below the RootPage node to create a Page node. Create three Page child nodes to the RootPage. As you add Page nodes in the Pages editor, in the Project window Kanzi Studio shows the location of these nodes in the scene graph. When you click a Page node in the Pages editor Kanzi Studio transitions to that Page node using the default cross-fade transition. Because there is no content in the Page nodes you just created, clicking does not have any visual effect in the Preview.
In the Pages double-click the name of a Page node, enter a new name, and press Enter. For example, call the three pages Navigation, Car, and Media.
In the Project select the RootPage node and in the Properties set the Default Subpage property to the NavigationPage node. When you activate the Page node where you set the Default Subpage property Kanzi activates the selected Page node. For example, when you set the NavigationPage node as the default subpage of the RootPagePage node, when you start the application Kanzi shows the NavigationPage node.
Set the background of the Page nodes
Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background. Kanzi has these brushes:
Color Brush to fill 2D content with a solid color.
Texture Brush to fill a 2D area with a texture.
Material Brush to apply a material to 2D content.
When you create a Kanzi Studio project it has a default Texture Brush called DefaultBackground and it paints the background of the RootPage node.
To set the background of the Page nodes:
Create a texture brush and apply it to the background of the RootPage node:
In the Project click RootPage and in the Properties in the Background Brush property select <Create texture brush...>. Kanzi Studio creates a Texture Brush with the default texture and sets the RootPage node to use this new Texture Brush.
In the Properties click next to the Background Brush property and set the Brush Texture property to the BackgroundDark texture. In the Properties click next to a property to access and edit the resource to which the property points without moving away from the currently selected node.
Apply the DefaultBackground brush as the background brush for all the other Page nodes in the project:
In the Project select the NavigationPage node.
In the Properties click next to the Background Brush to add the property to the NavigationPage node. no
Set the Background Brush property to the DefaultBackground brush.
In the Properties click the name of the Background Brush property and drag it to the Car and MediaPage nodes in the Project. When you drag a property from Properties and drop it to a node in the Project, Kanzi Studio adds that property and its value to that node. Now when you view the Page nodes in the Pages editor, you can see that each Page node has a background:
The RootPage node uses the Texture Brush you created in this section.
The Navigation, Car, and MediaPage nodes use the DefaultBackground brush.
Add content to the Navigation and CarPage nodes
In this section you add content to the Navigation and CarPage nodes.
To add content to the Page nodes:
From the Assets window drag the NavigationMockup.png image to the NavigationPage node in the Pages. Kanzi Studio automatically creates an Image node that uses the image you dragged from the Assets, and adds the Image node to the Page node where you dropped the image. Tip In the Assets window you can search and browse the content in your project:
In the search box enter the word contained in the name of the item you are looking for.
Click the buttons to show only the content of a certain type.
In the Projectpress Alt and right-click the CarPage node and select the Viewport 2D node. Viewport 2D is a special node because it can render both 2D objects, such as Image, Page, Button 2D, and a Scene, which is a 3D object. When you create a new Kanzi Studio project, the project has a Viewport 2D with a Scene that contains a Camera and a Directional Light. Tip When you press Alt and right-click a node in the Project window or a resource in the Library window, you get a direct access to the node and resource creation menu. If you only right-click a node or a resource, in the context menu select Create to access the creation menu.
In the Project drag from the Prefabs the CarScene node to the Viewport 2D node you just created in the CarPage node. When you drag a prefab from PrefabsKanzi Studio creates an instance of that prefab in the scene graph in the node where you drop the prefab.
Transitioning between Page nodes
When you click a Page node in the Pages, Kanzi Studio shows the transitions between the Page nodes in the Preview. However, to start the transitions between the Page nodes in your application you need to use a trigger with one of the Navigate to actions.
By default Kanzi uses cross-fade transition when you navigate to and leave that Page node. You can customize the transition using the Page Transitions editor.
In the next step of this tutorial you create the buttons that use Navigate to Page triggers to move between the Page nodes.
below the RootPage node to create a Page node. Create three Page child nodes to the RootPage. As you add Page nodes in the Pages editor, in the Project window Kanzi Studio shows the location of these nodes in the scene graph.
next to the 
next to the 
